<template>
  <div class="tab">
    <cube-tab-bar
      v-model="selectedLabel"
      show-slider
      ref="tabNav"
      :data="tabLabels"
      :useTransition="false"
    >
    </cube-tab-bar>
    <div class="slide-wrapper">
      <cube-slide
        ref="slide"
        :initial-index="index"
        :auto-play="autoPlay"
        :loop="loop"
        :show-dots="false"
        @scroll="scroll"
        @change="changePage"
        :options="slideOptions"
      >
        <cube-slide-item v-for="(tab, index) in tabs" :key="index">
          <component
            :is="tab.component"
            :data="tab.data"
            ref="component"
          ></component>
        </cube-slide-item>
        <!-- 商品 -->
        <!-- <cube-slide-item>
          <v-goods></v-goods>
        </cube-slide-item> -->
        <!-- 评价 -->
        <!-- <cube-slide-item>
          <v-ratings></v-ratings>
        </cube-slide-item> -->
        <!-- 商家 -->
        <!-- <cube-slide-item>
          <v-seller></v-seller>
        </cube-slide-item> -->
      </cube-slide>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import VSeller from 'components/seller/seller'
import VGoods from 'components/goods/goods'
import VRatings from 'components/ratings/ratings'
import { findIndex } from 'common/utils/util.js'

export default {
  props:{
    tabs:{
      type:Array,
      defautl() {
        return []
      }
    },
    initialIndex: {
      type: Number,
      default: 0
    }
  },
  components: {
    VSeller,
    VGoods,
    VRatings
  },
  data () {
    return {
      index:this.initialIndex,
      tabLabels: [{
        label: '商品'
      }, {
        label: '评价'
      }, {
        label: '商家'
      }],
      loop: false,
      autoPlay: false,
      showDots: false,
      slideOptions: {
        listenScroll: true,
        probeType: 3,
        directionLockThreshold: 0
      },
    }
  },
  mounted() {
    // 数据加载时手动调用数据
    this.changePage(this.index)
  },
  methods: {
    // 切换tab时
    changePage (current) {
      // current 是选项卡的索引值
      this.index = current
      const component = this.$refs.component[current];
      // 如果组件有 fetch 方法 ，才调用
      // if(component.fetch){
      //   component.fetch()
      // }
      component.fetch && component.fetch()
    },
    scroll (pos) {
      const x = Math.abs(pos.x)
      // tabNav宽度
      const tabItemWidth = this.$refs.tabNav.$el.clientWidth
      // slide宽度
      const slideScrollerWidth = this.$refs.slide.slide.scrollerWidth
      const deltaX = x / slideScrollerWidth * tabItemWidth
      this.$refs.tabNav.setSliderTransform(deltaX)
    },
  },
  computed: {
    // 被选择元素
    selectedLabel: {
      get() {
        return this.tabLabels[this.index].label;
      },
      set(newVal) {
        this.index = this.tabLabels.findIndex(value => {
          return value.label == newVal
        })
      }
    }
  }

}
</script>
<style lang="stylus" scoped>
>>> .cube-tab-bar
  padding 10px 0
.tab
  display flex
  flex-direction column
  height 100%
  .slide-wrapper
    flex 1
    overflow hidden
</style>
